<template>
    <div class="rfq flex font">
        <AsideVue></AsideVue>
        <div class="box" :class="{ 'w87': !store.state }">
            <NavVue></NavVue>
            <div class="flex pl-10">
                <!-- 左边 -->
                <div class="left pl-10 ">
                    <p class="ml-10 title f18">RFQ LIST</p>
                    <el-table v-el-table-infinite-scroll="load" :data="LeftTable" @row-click="table" height="88vh"
                        style="width: 100%" :row-class-name="rfqList">
                        <el-table-column prop="inquiry_id" align="center" label="RFQ ID" width="140" />
                        <el-table-column prop="country.name" align="center" label="CNTY" />
                        <el-table-column prop="items_count" align="center" label="ITEMS" />
                        <el-table-column prop="customer.Customer_type" align="center" label="SUPPLIER" min-width="90" />
                        <el-table-column prop="state" align="center" label="STA" />
                    </el-table>
                </div>
                <!-- 中间 -->
                <Centre ref="strike" :rfqId="rfqId" @save="save">
                </Centre>
                <!-- 右边 -->
                <RightVue></RightVue>
            </div>
        </div>
    </div>
</template>

<script setup>
import AsideVue from '../components/Aside.vue';
import NavVue from '../components/Nav.vue';
import Centre from './components/Centre.vue';
import RightVue from './components/Right.vue';
import { ref } from "vue";
import * as $axios from '../../api/index'
import { useDemoStore } from '../../pinia/index'
const store = useDemoStore()

// 接收子组件暴露的方法
const strike = ref()

// 左边部分
const LeftTable = ref([])
const data = {
    token: store.token,
    page: 0, //页数
    limit: 25 //显示条数
}
const postLefttable = () => {
    $axios.$Inside_polling(data).then(res => {
        LeftTable.value = [
            ...LeftTable.value,
            ...res.data.data
        ]
        rfqId.value = rfqId.value || res.data.data[0].inquiry_id
        // console.log(res.data.data[0].inquiry_id)
    })
}

// 上拉加载更多
const load = () => {
    data.page++
    postLefttable()
    // console.log(data.page)
}

// 子组件保存触发
const save = () => {
    const data = {
        token: store.token,
        page: 1, //页数
        limit: 25 //显示条数
    }
    $axios.$Inside_polling(data).then(res => {
        LeftTable.value = res.data.data
        rfqId.value = res.data.data[0].inquiry_id
    })
}

const rfqId = ref()  // 左边表格的id
// 点击表格高亮
const table = (row) => {
    rfqId.value = row.inquiry_id
}
const rfqList = ({
    row,
    rowIndex,
}) => {
    if (row.inquiry_id === rfqId.value) {
        return 'success-row'
    }
    return ''
}

</script>

<style>
.success-row {
    --el-table-tr-bg-color: #eef1f4;
}
</style>

<style lang="less" scoped>
@import './rfq.less';
</style>